<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>库存管理-云校通_教师版</title>
<meta name="viewport"
	content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="<%=basePath%>/css/xcgl_kcgl.css" />
<style>

.db_main .right span{
  position: relative; left: 2px;
  background: #18b4ed;
  color: #fff;
  font-size: 14px;
  padding: 2px 4px 2px 4px;
  border-radius: 4px;
}
.weui-header-left .aicon {
	font-family: iconfont !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-stroke-width: .2px;
}
</style>
</head>
<body ontouchstart>
	<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div class="weui-header bg-blue">
		<div class="weui-header-left">
			<a href="<%=basePath%>/ls/school/property/home" class="aicon icon-109 f-white">返回</a>
		</div>
		<h1 class="weui-header-title">库存管理</h1>
	</div>
	<div class="header_tab">
		<ul>
			<li class="active left"><p>非消耗品</p></li>
			<li class="right"><p>消耗品</p></li>
		</ul>
	</div>

    <!-- 非消耗品 -->
	<div class="main">
	  <ul class="d_title">
	    <li>类别名称</li>
	    <li>物品名称</li>
	    <li>借出/库存</li>
      </ul>
      <div class="data_box" style="padding-bottom:12%;">
        <div id="item1"></div>
         <div  class="dropload-down f10" style="display:block;" id="div1">
		      <div class="loadData dropload-hasData" id="div3">点击加载更多数据...</div>
	     </div>
	     <div class="dropload-load f10" id="div2" style="display:none;"><span class="weui-loading"></span>正在加载中...</div>
      </div>
	</div>
	
	<!-- 消耗品 -->
	<div class="main display">
	   <ul class="d_title">
			<li>类别名称</li>
			<li>物品名称</li>
			<li>库存</li>
		</ul>
		<div class="data_box" style="padding-bottom:12%;">
        <div id="item2"></div>
         <div  class="dropload-down f10" style="display:block;" id="div4">
		      <div class="loadData dropload-hasData" id="div6">点击加载更多数据...</div>
	     </div>
	     <div class="dropload-load f10" id="div5" style="display:none;"><span class="weui-loading"></span>正在加载中...</div>
      </div>
	</div>
	
	<script>
	    var item1 = {page:1,rows:5,cycleUse:1};
	    var item2 = {page:1,rows:5,cycleUse:0};
	    var itemId1 = '#item1';
	    var itemId2 = '#item2';
	    var first = true;
	    var flag = "left"; //选项卡标识
		window.onload = function() {
			initData();
			loadItem(item1,itemId1);
		}
		
		function initData(){
			var uli = document.getElementsByClassName('header_tab')[0].getElementsByTagName('li');
			var realMain = document.getElementsByClassName('main');
			// -----
			var writeBtns = document.getElementsByClassName('write');
			var handleBtns = document.getElementsByClassName('handle');
			var statusMain = document.getElementsByClassName('s_main');
			var statustextarea = document.getElementsByTagName('textarea');
			// -----
			var showBtns = document.getElementsByClassName('db_title');
			var showMain = document.getElementsByClassName('db_main');
			var btnChange = document.getElementsByClassName('icon');
			// -----
			
			showDetails(uli, null, null, realMain, null);
			showDetails(showBtns, showMain, btnChange, null, null);
			showDetails(writeBtns, statusMain, null, statustextarea, handleBtns);
			showDetails(handleBtns, statustextarea, null, statusMain, writeBtns);
		}
		
		function showDetails(btn, main, bChange, textarea, handle) {
			for (var i = 0; i < btn.length; i++) {
				btn[i].index = i;
				btn[i].onmouseover = function() {
					if (main === null) {//btn textarea
						btn[this.index].onclick = function() {
							aClick(btn, btn[this.index], textarea[this.index],textarea);
						}
					} else if (bChange !== null) {
						btn[this.index].onclick = function() {
							bClick(main[this.index], bChange[this.index]);
						}
					} else if (textarea !== null) {
						if (btn[this.index].className !== 'write') {
							// console.log(btn[this.index].getElementsByTagName('li'))
							var cbtn = btn[this.index]
									.getElementsByTagName('li');
							var a = this.index
							cbtn[1].onclick = function() {
								btn[a].style.display = 'none';
								main[a].style.display = 'none';
								textarea[a].style.display = 'block';
								handle[a].style.display = 'block';
							}
							cbtn[0].onclick = function() {
								btn[a].style.display = 'none';
								main[a].style.display = 'none';
								textarea[a].style.display = 'block';
								handle[a].style.display = 'block';
								// console.log(textarea[a].innerText)
								// console.log(main[a].value)
								textarea[a].innerText = main[a].value
							}
						} else {
							wClick(btn[this.index], main[this.index],
									textarea[this.index], handle[this.index]);
						}
					}
				}
			}
		}
		function aClick(obtn, btn, main, omain) {
			if (btn.className === 'left') {
				obtn[0].className = 'active left'
				obtn[1].className = 'right'
				omain[1].className = 'display main'
				omain[0].className = 'main'
				flag = 'left';
			} else {
				obtn[0].className = 'left'
				obtn[1].className = 'active right'
				omain[1].className = 'main'
				omain[0].className = 'display main'
				flag = 'right';
				if(first){
					loadItem(item2,itemId2);
					first = false;
				}
			}
		}
		function bClick(main, bChange) {
			if (main.style.display === 'block') {
				main.style.display = 'none'
				bChange.className = 'icon icon-6 f-blue'
			} else if (main.style.display === null) {
				main.style.display = 'none'
				bChange.className = 'icon icon-6 f-blue'
			} else {
				main.style.display = 'block'
				bChange.className = 'icon icon-8 f-blue'
			}
		}
		function wClick(wBtn, main, textarea, handle) {
			main.style.display = 'none'
			wBtn.style.display = 'none'
			textarea.style.display = 'block'
			handle.style.display = 'block'
			textarea.value = main.innerText.replace(/[\r\n]/g, "").replace(
					/[ ]/g, "")//去掉回车空格后赋值
		}
		
		$(".dropload-down").on("click", ".dropload-hasData", function() {
			if(flag ==='left'){
				item1.page++;
				loadItem(item1,itemId1);
			}
			if(flag ==='right'){
				item2.page++;
				loadItem(item2,itemId2);
			}
		});
	</script>
	<!-- ajax加载数据 -->
	<script>
	function loadItem(param, id) {
		$.ajax({
			url : basePath + '/ls/school/property/stock/query',
			type : 'post',
			dataType : 'json',
			data : param,
			success : function(data) {
				if(flag === 'left'){
					$("#div1").css('display','none');					
	                 $("#div2").css('display','block');
					writerDataToDom(data.data,id);
					if(param.page * param.rows >= data.data.total){
	                   	$("#div3").html("没有更多数据了...");
	                   	$("#div1").unbind();
					}
					setTimeout(function() {
						    $("#div1").css('display','block');					
		                    $("#div2").css('display','none');		
	        		},800);
				}
				if(flag === 'right'){
					$("#div4").css('display','none');					
	                 $("#div5").css('display','block');
					writerDataToDom(data.data,id);
	                 
					if(param.page * param.rows >= data.data.total){
	                   	$("#div6").html("没有更多数据了...");
	                   	$("#div4").unbind();
					}
					setTimeout(function() {
						    $("#div4").css('display','block');					
		                    $("#div5").css('display','none');		
	        		},800);
				}
				
			}
		});
	}
	
	function writerDataToDom(data,id){
		if(data.rows.length > 0) {
    		var html = "";
    		if(flag ==='left'){
	    		for(var i in data.rows) {
	    			var item = data.rows[i];
	    			html += '<div class="db" style="margin-bottom:0px;" ><ul class="db_title"> \
					                 <li>'+ item.typeName +'</li>\
					                 <li>'+ item.goodsName +'</li>\
					                 <li>'+ (item.totalStock - item.currentStock) +'/' + item.totalStock +'<i class="icon icon-6 f-blue" style="font-size: 2px;float:right"></i></li>\
				              </ul>\
				             <div class="db_main weui-border-b">\
						        <ul>\
						        <li>型号</li>\
						        <li class="right">'+ item.goodsAttr +'</li>\
						        </ul>\
						        <ul> \
							       <li>编号</li>\
							       <li class="right"><a href="<%=basePath%>/ls/school/property/stockIndex/detail?id='+ item.id +'"><span class="mbtn">详情</span></a></li>\
						        </ul>\
				          </div></div>';
	    		}
    		}
    		if(flag ==='right'){
	    		for(var i in data.rows) {
	    			var item = data.rows[i];
	    			html += '<div class="db" style="margin-bottom:0px;" ><ul class="db_title"> \
					                 <li>'+ item.typeName +'</li>\
					                 <li>'+ item.goodsName +'</li>\
					                 <li>'+ item.currentStock +'<i class="icon icon-6 f-blue" style="position: relative; left: 20px; font-size: 2px;"></i></li>\
				              </ul>\
				             <div class="db_main weui-border-b">\
				                 <ul>\
							        <li>物品名称</li>\
							        <li class="right">'+ item.goodsName +'</li>\
						        </ul>\
				                 <ul>\
							        <li>型号</li>\
							        <li class="right">'+ item.goodsAttr +'</li>\
						        </ul>\
						        <ul>\
								   <li>当前库存</li>\
								   <li class="right">'+ item.currentStock +'</li>\
						        </ul>\
				          </div></div>';
	    		}
    		}
    		
    		$(id).append(html);
    		initData();
	   }
   }
	function describe(str){
		if(str == null)
			return "";
		else
			return str;
	}
	</script>
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
</html>